<template>
	<scroll-view scroll-y="true" class="chartinfo" 
	@tap = "screentap" 
	v-bind:style="{ bottom: chartinfoheight+'rpx'}"
	:scroll-into-view = "scrollviewto"
	:scroll-with-animation = true
	@scrolltoupper = "nextpage()"
	ref="mychartinfo">
		<view class="loading" v-show="loadingflag">
			<image src="../../static/images/commom/loading.png" class="loadimg" :animation="animationData"></image>
		</view>
		<view class="item" v-for="(item,index) in infolist" :id = "'msg'+item.id">
			<view class="chartitem" v-if="item.time">{{_chanetime(item.time)}}</view>
			<view class="msg left" v-if="item.fromId != uid">
				<image class="userimg" :src="item.imgurl"></image>
				<view class="message">
					<view class="msg-txt" v-if="item.types == 0">
						{{item.message}}
					</view>
					<view class="msg-img" v-if="item.types == 1">
						<image :src="item.message" class="img" mode="widthFix" @tap = "previewImage(item.message)"></image>
					</view>
					<view class="msg-audio"  v-if="item.types == 2" :style="{ width: (item.vlenght/30)*100 + '%' }" @tap = "playaudio(item.message)">
						<image src="../../static/images/commom/blackwave.png" class="blackwave"></image>
						{{item.vlenght}}"
					</view>
					<view class="msg-location " v-if="item.types == 3">
						<view class="top">
							<view class="name" style="text-align: left;">
								{{item.message.name}}
							</view>
							<view class="address" style="text-align: left;">
								{{item.message.address}}
							</view>
						</view>
						<view class="bottom">
							<image src="../../static/images/commom/map.png" class="img" mode="aspectFill" @tap = "openmap(item.message.latitude,item.message.longitude,item.message.name,item.message.address)"></image>
							<!-- <map class="img" :latitude="item.data.latitude" :longitude="item.data.longitude" :markers="covers(item.data)">
							</map> -->
						</view>
					</view>
				</view>
			</view>
			<view class="msg right" v-if="item.fromId == uid">
				<image class="userimg" :src="item.imgurl"></image>
				<view class="message">
					<view class="msg-txt" v-if="item.types == 0">
						{{item.message}}
					</view>
					<view class="msg-img" v-if="item.types == 1">
						<image :src="item.message" class="img" mode="widthFix" @tap = "previewImage(item.message)"></image>
					</view>
					<view class="msg-audio"  v-if="item.types == 2" :style="{ width: (item.vlenght/30)*100 + '%' }" @tap = "playaudio(item.message)">
						<image src="../../static/images/commom/blackwave.png" class="blackwave"></image>
						{{item.vlenght}}		
					</view>
					<view class="msg-location " v-if="item.types == 3">
						<view class="top">
							<view class="name">
								{{item.message.name}}
							</view>
							<view class="address">
								{{item.message.address}}
							</view>
						</view>
						<view class="bottom">							
							<image src="../../static/images/commom/map.png" class="img" mode="aspectFill" @tap = "openmap(item.message.latitude,item.message.longitude,item.message.name,item.message.address)"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	const innerAudioContext = uni.createInnerAudioContext();
	import myfun from "../../commoms/js/myfunction.js"
	// import data from "../../commoms/data/data.js"
	export default {
		name:"chartinfo",
		data() {
			return {
				infolist:[],//消息列表
				user:{},//用户本身
				imglist:[],
				scrollviewto:'',
				nowtime:new Date(),
				oldtime:'',//记录加载信息最后一条的时间
				chartinfoheight:100,
				loadingflag:false,
				animationData: {},
				loadtimer:null,
				nowpage:0,
				pagesize:10,
			};
		},
		props:{
			fid:{//获取发送者的id
				type:String,
				default:''
			},
			uid:{//获取用户本身id
				type:String,
				default:''
			},
			tap:{
				type:String,
				default:''
			},
			token:{
				type:String,
				default:''			
			}
		},
		created(){
			this._getmsg();
			this._getmsgsocket('msg');
			this._getmsgsocket('groupmsg');
		},
		methods:{
			_getmsgsocket(msg){//获取发送过来的数据
				this.socket.on(msg,(data,tip)=>{	
					let flag;
					if(msg == 'msg'){
						flag = (data.uid === this.fid && tip == 0)
					}else if(msg == 'groupmsg'){
						flag = (data.tid === this.fid && tip == 0)
					}
					if(flag){//当前页面的id值要与发送者的id值相同					
						// if(data.type == 3){
						// 	data.data = JSON.parse(data.data)
						// 	console.log(data.data);
						// }
						// console.log(data);
						this.recivedmsg(data)
					}
				})
			},
			nextpage(){
				this.loadingflag = true//是否出现loading加载标记
				var animation = uni.createAnimation({
					duration: 800,
					timingFunction: 'ease',
				})
				let i = 1
				if(!this.loadtimer){
					this.loadtimer = setInterval(function() {
						animation.rotate(i*30).step()
						this.animationData = animation.export()
						i++;
					}.bind(this),50)
				}
				setTimeout(()=>{
					this._getmsg();
					clearInterval(this.loadtimer)
					this.loadtimer = null;
					this.loadingflag = false;
				},800)
			},
			openmap(latitude,longitude,name,address){//打开地图
				uni.openLocation({
				    latitude: latitude,
				    longitude: longitude,
					name:name,
					address:address,
				    success: function () {
				        console.log('success');
				    }
				});
			},
			screentap(){
				this.$emit('screentap');
			},
			/*废弃消息获取
			_getmsg1(){				
				let msg = data.getmessage();
				for(var i = this.nowpage*7;i<(this.nowpage + 1)*7;i++){
					if(i >= msg.length){
						break;
					}
					msg[i].imgurl = `../../static/images/userimg/pic_${msg[i].imgurl}.jpg`
					if(msg[i].type == 1){
						this.imglist.unshift(msg[i].message)
					}
					if(i < msg.length - 1){
						let t = myfun.spacetime(this.nowtime,msg[i].time)
						if(t != ''){
							this.nowtime = t
						}
						msg[i].time = t;
					}
					this.infolist.unshift(msg[i])
				}
				this.nowpage++;
			},
			*/
			_getmsg(){//获取信息列表
				let url = "";
				if(this.tap == 0){
					url = this.serverurl+"chart/msg";
				}else if(this.tap == 1){
					url = this.serverurl+"chart/groupmsg";
				}
				uni.request({
					url,
					data:{
						uid:this.uid,
						fid:this.fid,
						nowpage:this.nowpage,
						pagesize:this.pagesize,
						token:this.token,
					},
					method:'POST',
					success: (result) => {
						let info = result.data;	
						if(info.status == 200){
							let msg = info.data;
							if(msg.length == 0){
								return
							}
							msg.reverse()//数组倒置，让最新消息放置最后
							if(this.nowpage == 0){//记录再数据库中最晚的时间
								this.oldtime = msg[msg.length - 1].time
							}
							if(msg.length != 0){
								this.nowpage++;
							}else if(msg.length < this.pagesize){
								uni.showToast({
									title: '已加载全部消息',
									duration: 2000,
									icon:'none'
								});
								return;
							}
							
							let oldtime = msg[0].time;//存放时间
							msg[0].imgurl = this.serverurl+`userimage/${msg[0].imgurl}`;
							for(var i = 1;i<msg.length;i++){
								let obj = msg[i];					
								if(obj.types === 3){//位置信息
									obj.message = JSON.parse(obj.message)
								}
								obj.imgurl = this.serverurl+`userimage/${obj.imgurl}`;
								
								if(obj.types == 1){ //图片信息
									this.imglist.unshift(obj.message)
								}
								let t = myfun.spacetime(oldtime, obj.time);
								if(t != ""){
									oldtime = t;			
								}
								obj.time =t
							}
							this.infolist = msg.concat(this.infolist);	
							console.log(this.infolist)
							this.$nextTick(()=>{
								this.scrollviewto = 'msg'+msg[msg.length - 1].id//自动跳转到当前信息的id值
							})
						}else if(info.status == 300){
							uni.navigateTo({//token过期
								url:"../llogin/llogin?name="+this.user.name
							})
						}
						
					}
				})
			},
			playaudio(audiopath){//播放音频			
				innerAudioContext.autoplay = true;
				innerAudioContext.src = audiopath;
				innerAudioContext.onPlay(() => {
				  console.log('开始播放');
				});
			},
			recivedmsg(info){//接受信息{type,data}
				let len = this.infolist.length;
				let mydata = {
					fromId:info.uid,//暂时设定为自己发送
					types:info.type,
					message:info.data,
					time:new Date(),
					imgurl:info.imgurl,
					id:len
				}
				let t = myfun.spacetime(this.oldtime,mydata.time)
				if(t != ''){
					this.oldtime = t
				}
				mydata.time = t;
				if(info.type == 2){//音频文件
					mydata.vlenght = info.length;
				}
				this.infolist.push(mydata)
				if(info.type == 1){
					this.imglist.push(mydata.message)
				}
				this.$nextTick(()=>{
					this.scrollviewto='msg'+mydata.id//自动跳转到当前信息的id值
				})
			},
			changeheight(flag){
				if(flag){
					this.chartinfoheight = 540;
				}else{
					this.chartinfoheight = 100;
				}
			},
			previewImage(e){
				let index = 0;
				for(var i = 0;i<this.imglist.length;i++){
					if(this.imglist[i] === e){
						index = i;
					}
				}
				uni.previewImage({
					current :index,
				    urls: this.imglist,
				    longPressActions: {
				        itemList: ['发送给朋友', '保存图片', '收藏'],
				        success: function(data) {
				            console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
				        },
				        fail: function(err) {
				            console.log(err.errMsg);
				        }
				    }
				});
			},
			_chanetime(time){
				return myfun.gettime(time)
			}
		}
	}
</script>

<style lang="scss">
.chartinfo{
	position: fixed;
	top: 170rpx;
	bottom: 100rpx;
	// flex: 1;
	width: 100%;
	box-sizing: border-box;
	padding: 10rpx 28rpx;
	transition: all .2s;
	overflow: hidden;
	.loading{
		width: 100%;
		height: 36rpx;
		box-sizing: border-box;
		margin: 15rpx 0;
		.loadimg{
			display: block;
			width: 36rpx;
			height: 36rpx;
			margin: 0 auto;
		}
	}
	.item{
		margin-bottom: 20rpx;
		.chartitem{
			color: rgba(158, 158, 158, 100);
			font-size: 8px;
			text-align: center;
			margin-bottom: 12rpx;
		}
		.msg{
			display: flex;
			.userimg{
				box-sizing: border-box;
				width: 88rpx;
				height: 88rpx;
				flex: 0 0 88rpx;
				border-radius: 26rpx;
				border: 4rpx solid rgba(52, 199, 88, 100);
				margin-right: 16rpx;
			}
			.message{
				flex: 1;
				box-sizing: border-box;
				padding-right: 148rpx;
				.msg-txt{
					word-wrap:break-word;
					word-break:break-all; 
					display: inline-block;
					background-color: #FFFFFF;
					color: rgba(16, 16, 16, 100);
					font-size: 28rpx;
					text-align: left;
					line-height: 40rpx;
					padding: 24rpx 16rpx;
					border-radius: 0px 12rpx 12rpx 12rpx;
				}
				.msg-img{
					box-sizing: border-box;				
					.img{
						display: inline-block;
						box-sizing: border-box;
						width: 300rpx;
						border-radius: 0px 24rpx 24rpx 24rpx;
						border: 2rpx solid rgba(52, 199, 88, 100);
					}
				}
				.msg-audio{
					word-wrap:break-word;
					word-break:break-all; 
					display: inline-block;
					background-color: #FFFFFF;
					color: rgba(16, 16, 16, 100);
					font-size: 28rpx;
					text-align: left;
					line-height: 40rpx;
					padding: 24rpx 16rpx;
					border-radius: 0px 12rpx 12rpx 12rpx;
					min-width: 21%;
					.blackwave{
						float: left;
						margin-right: 20rpx;
						width: 40rpx;
						height: 40rpx;
					}
				}
				.msg-location{
					width:460rpx;
					overflow: hidden;
					.top{
						background-color: #FFFFFF;
						font-size: 30rpx;
						text-align: right;
						padding: 10rpx;
						box-sizing: border-box;
						.name{
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						.address{
							font-size: 24rpx;
							color: rgba(158, 158, 158, 100);
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
					.bottom{
						.img{
							width: 460rpx;
							height: 200rpx;
						}
					}
				}
			}
			&.right{
				flex-direction: row-reverse;
				.userimg{
					margin-left: 16rpx;
				}
				.message{
					padding-right: 0rpx;
					padding-left: 148rpx;
					text-align: right;
					.msg-txt{
						word-wrap:break-word; 
						word-break:break-all; 
						text-align: left;
						background-color: rgba(178, 239, 155, 100);
						border-radius: 12rpx 0rpx 12rpx 12rpx;
					}
					.msg-img{
						.img{
							border-radius: 24rpx 0rpx 24rpx 24rpx;
						}
					}
					.msg-audio{
						word-wrap:break-word;
						word-break:break-all; 
						text-align: left;
						background-color: rgba(178, 239, 155, 100);
						border-radius: 12rpx 0rpx 12rpx 12rpx;
						.blackwave{
							float: right;
							margin-right: 0rpx;
							margin-left: 20rpx;
						}
					}
					.msg-location{
						.top{
							text-align: left;
						}
					}
				}
			}
		}
	}
}
</style>
